<template>
  <div class="message" ref="messageWrapper">
    <ul>
      <li class="wrapper border-1px" v-for="(item,$index) in messageArray" :key="$index">
        <div class="content">
          <h1 class="title" v-if="item.reply_advice">官方消息</h1>
          <div class="detail">
            <span class="reply" v-show="replay">回复:</span>
            <p class="message-font">{{item.advice}}</p>
            <p class="feedback" v-show="feedback">"{{item.reply_advice}}"</p>
          </div>
        </div>
      </li>
    </ul>
    <nomore v-if="messageArray.length===0"></nomore>
    <loading-full></loading-full>
    <v-footer></v-footer>
    <back></back>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'
  import nomore from '../../common/nomore/nomore'
  import VFooter from '../../common/footer/footer'
  import LoadingFull from '../../common/loading-full/loading-full'
  import back from '../../common/back/back'

  export default {
    data() {
      return {
        replay: true,
        feedback: true,
        messageArray: []
      }
    },
    created() {
      this.$nextTick(() => {
        if (!this.messageScroll) {
          this.messageScroll = new BScroll(this.$refs.messageWrapper, {
            click: true
          })
        } else {
          this.messageScroll.refresh()
        }
      })
      this.getData()
    },
    methods: {
      getData() {
        this.$http.get('/game/index.php?m=Home&c=Api&a=getMessages').then((response) => {
          if (response.data.code === this.ERROR_OK) {
            this.messageArray = response.data.data
            this.Indicator.close()
          }
        })
      }
    },
    components: {
      nomore,
      LoadingFull,
      VFooter,
      back
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../assets/stylus/mixin.styl"
  .message
    position absolute
    left 0
    top 0
    width 100%
    height 100%
    background #fff
    z-index 10
    overflow hidden
    .wrapper
      border-1px(rgba(0, 0, 0, .2))
      &:last-child
        border-none()
      .content
        padding 32px
        .title
          display block
        .detail
          margin-top 15px
          line-height 32px
          .reply
            display inline
            font-size 28px
          .message-font
            display inline
            margin-top 15px
            font-size 28px
          .feedback
            margin-top 16px
            font-size 28px
            color #333
</style>
